<template>
    <div>
        <el-dialog
                class="my_dialog"
                v-bind="$attrs"
                v-on="$listeners"
                v-draggable
                width="700px"
                :visible="visible"
                @open="onOpen"
                @close="onClose"
                :title="title"
                :close-on-click-modal="false"
        >
            <el-form
                    ref="elForm"
                    :model="formData"
                    :rules="rules"
                    size="medium"
                    label-width="100px"
            >
                <el-form-item label="工作中心" prop="workCenterId">
                    <el-input
                            v-model="workCenterName"
                            placeholder="请选择工作中心"
                            clearable
                            :style="{ width: '100%' }"
                            readonly
                            @click.native="visiblea = true"
                    />
                </el-form-item>
                <el-form-item label="设备编码" prop="code">
                    <el-input
                            v-model="formData.code"
                            placeholder="请选择设备"
                            show-word-limit
                            clearable
                            readonly
                            :style="{ width: '100%' }"
                            @click.native="visibleb = true"
                    ></el-input>
                </el-form-item>
                <el-form-item label="设备名称" prop="name">
                    <el-input
                            v-model="formData.name"
                            placeholder="请选择设备"
                            show-word-limit
                            readonly
                            :style="{ width: '100%' }"
                    ></el-input>
                </el-form-item>
                <el-form-item label="工作状态" prop="workStatus">
                    <el-select
                            v-model="formData.workStatus"
                            placeholder="请选择工作状态"
                            clearable
                            :style="{ width: '100%' }"
                    >
                        <el-option
                                v-for="(item, index) in workStatusOptions"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用" prop="status" required>
                    <el-switch
                            v-model="formData.status"
                            active-color="#13CE66"
                            inactive-color="#FF4949"
                            :active-value="0"
                            :inactive-value="1"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                            v-model="formData.remark"
                            type="textarea"
                            placeholder="请输入备注"
                            :autosize="{ minRows: 4, maxRows: 4 }"
                            :style="{ width: '100%' }"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </el-dialog>
        <div>
            <!-- 工作中心选择 -->
            <workCenterList :visible.sync="visiblea" @Ok="workCenterOk" />
            <!-- 设备选择 -->
            <equipment :visible.sync="visibleb" @Ok="equipmentOk" />
        </div>
    </div>
</template>
<script>
    import workCenterList from "../basic_group/workCenterList";
    import equipment from "./equipment";
    export default {
        inheritAttrs: false,
        components: {workCenterList,equipment},
        props: ["title", "visible", "item"],
        data() {
            return {
                formData: {
                    code: "",
                    name: "",
                    status: 0,
                    workCenterId: "",
                    workStatus: "",
                    remark: "",
                },
                rules: {
                    code: [
                        {
                            required: true,
                            message: "请选择设备",
                            trigger: "blur",
                        },
                    ],
                    workCenterId: [
                        {
                            required: true,
                            message: "请选择工作中心",
                            trigger: "blur",
                        },
                    ],
                    workStatus: [
                        {
                            required: true,
                            message: "请选择工作状态",
                            trigger: "blur",
                        },
                    ],
                },
                workStatusOptions: [],
                workCenterIdOptions: [],

                /**
                 * 工作中心选择
                 */
                visiblea: false,
                workCenterName: "",

                /**
                 * 设备选择
                 */
                visibleb:false
            };
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        methods: {
            onOpen() {
                this.$nextTick(() => {
                    if (this.item) {
                        this.formData = JSON.parse(JSON.stringify(this.item));
                        this.workCenterName = this.item.workCenterIdText;
                    }
                });
            },
            onClose() {
                this.$refs["elForm"].resetFields();
                this.workCenterName = "";
                this.close();
            },
            close() {
                this.$emit("update:visible", false);
            },
            handleConfirm() {
                let form = JSON.parse(JSON.stringify(this.formData));
                console.log(form);
                this.$refs["elForm"].validate((valid) => {
                    if (!valid) return;
                    this.$emit("Ok", form);
                    this.close();
                });
            },

            workCenterOk(item) {
                this.formData.workCenterId = item.id;
                this.workCenterName = item.name;
                this.visiblea = false;
            },

            equipmentOk(item){
                this.formData.name = item.facilityName;
                this.formData.code = item.facilityCode;
                this.visibleb = false;
            }

        },
    };
</script>
<style>
</style>
